<template>
    <div class="home-swipe">
        <van-search v-model="search" placeholder="请输入搜索关键词" input-align="center" @search="onSearch"/>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item,index) in bannerData" :key="index">
                <!-- <img :src="item.picUrl" alt=""> -->
                <van-image :src="item.picUrl" lazy-load />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>
<script>
import { Toast } from 'vant';
//import axios from "axios";
export default {
    data() {
        return {
            search: '',
            bannerData: []
        };
    },
    methods:{
    //完成一个方法，实现网络请求轮播数据的功能
    onSearch(val){
            Toast(val)
        },
        getBanner(){
            this.$request('get','recommend/banner')
            .then(response=>{
                console.log(response)
                if(response.result == 100){
                    this.bannerData = response.data
                }
            })
        }
    },
    created(){
        this.getBanner();
    },
    mounted(){

    }
};
</script>
<style scoped>
 /* .my-swipe .van-swipe-item img{
    width: 100%;
 } */
</style>